<template>
    <div class="main-container">
        <div class="mian-panel">
            <div class="container">
                <span class="mian-text">注册中心</span>
                <a-form ref="formRef" :model="registerForm" name="basic" autocomplete="off" @finish="onFinish"
                    @finishFailed="onFinishFailed">

                    <a-form-item label="" name="username" :rules="[{ required: true, message: '请输入邮箱' },
                    {
                        pattern: usernameReg, message: '请输入正确的邮箱格式！', trigger: 'blur'
                    }]">
                        <a-input class="custom-input" v-model:value="registerForm.username" size="large" placeholder="邮箱" />
                    </a-form-item>

                    <div class="form-row">
                        <div class="col-7">
                            <a-form-item label="" name="verify" :rules="[{ required: true, message: '请输入邮箱验证码' }]">
                                <a-input class="custom-input" v-model:value="registerForm.verify" :disabled="disabledStatus"
                                    size="large" placeholder="邮箱验证码" />
                            </a-form-item>
                        </div>
                        <div class="col-3">
                            <a-form-item>
                                <a-button class="verify-btn" :loading="verifyLoading" :disabled="verifyStatus"
                                    @click="toVerify">{{ timeData.buttonText }}</a-button>
                            </a-form-item>
                        </div>
                    </div>
                    <a-form-item label="" name="password"
                        :rules="[{ required: true, message: '请输入密码' }, { min: 8, message: '密码不能少于8位', trigger: 'blur' }]">
                        <a-input-password class="custom-input-password" v-model:value="registerForm.password" size="large"
                            placeholder="密码" />
                    </a-form-item>
                    <a-form-item label="" name="confirmPassword" :rules="[
                        {
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback('请再次输入密码');
                                } else if (value !== registerForm.password) {
                                    callback('两次输入密码不一致');
                                }
                                callback();
                            }
                        }]">
                        <a-input-password class="custom-input-password" v-model:value="registerForm.confirmPassword"
                            size="large" placeholder="确认密码" />
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" class="register-btn" html-type="submit"
                            :loading="registerLoading">注册</a-button>
                    </a-form-item>
                </a-form>
            </div>
            <div class="more-container">
                <a-space size="2px">
                    <router-link class="more-text" to="/login">返回登录</router-link>
                </a-space>
            </div>
        </div>
    </div>
</template>

<script setup>
import { verify, register } from '@/api/user';
import store from '@/store';
import {
    ref,
    reactive
} from 'vue';
const usernameReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
const formRef = ref();
const verifyLoading = ref(false);
const verifyStatus = ref(false);
const disabledStatus = ref(true);
const registerLoading = ref(false);
const timeData = reactive({
    buttonText: '发送',
    isCounting: false,
    countdown: 0
});
const registerForm = reactive({
    username: '',
    verify: '',
    password: '',
    confirmPassword: ''
});
const toVerify = () => {
    if (registerForm.username == undefined || registerForm.username == null || registerForm.username == '' || !usernameReg.test(registerForm.username)) {
        formRef.value.validateFields(['username']);
        return;
    }
    verifyLoading.value = true;
    verify(registerForm).then((response) => {
        if (response && response.code === 200) {
            setTimeout(() => {
                verifyLoading.value = false;
                disabledStatus.value = false;
                if (timeData.isCounting) {
                    return;
                }
                verifyStatus.value = true;
                timeData.isCounting = true;
                timeData.countdown = 60;
                timeData.buttonText = timeData.countdown;
                const times = setInterval(() => {
                    timeData.countdown--;
                    timeData.buttonText = timeData.countdown;
                    if (timeData.countdown === 0) {
                        clearInterval(times);
                        timeData.isCounting = false;
                        verifyStatus.value = false;
                        timeData.buttonText = '重新发送';
                    }
                }, 1000);
            }, 700);
        } else {
            verifyLoading.value = false;
        }
    });
};
const onFinish = values => {
    registerLoading.value = true;
    register(registerForm).then((response) => {
        if (response.code === 200) {
            setTimeout(() => {
                registerLoading.value = false;
            }, 700);
        } else {
            registerLoading.value = false;
        }
    })
    console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};
</script>

<style lang="scss" scoped>
.main-container {
    width: 100vw;
    height: calc(100vh);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e8eaf2;
    background-position: center;
    background-size: cover;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0.5rem 2rem;

    .mian-panel {
        max-width: 450px;
        width: 100%;
        margin: auto;

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 1.5rem 1.5rem 0 1.5rem;
            background-color: #fff;

            .mian-text {
                font-size: 2.25rem;
                margin-bottom: 2.5rem;
                text-align: center;
                color: #343a40;
            }

            .custom-input {
                height: calc(1.5em + .75rem + 2px);
                padding: .375rem .75rem;
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                color: #495057;
                background-color: #f0f3f8;
                background-clip: padding-box;
                border-radius: .25rem;

                &::placeholder {
                    background-color: #f0f3f8;
                    color: #6c757d;
                }

            }

            .custom-input-password {
                height: calc(1.5em + .75rem + 2px);
                padding: .375rem .75rem;
                font-size: 1rem;
                font-weight: 400;
                line-height: 1.5;
                color: #495057;
                background-color: #f0f3f8;
                background-clip: padding-box;
                border-radius: .25rem;

                &:deep(.ant-input) {
                    background-color: #f0f3f8;

                    &::placeholder {
                        background-color: #f0f3f8;
                        color: #6c757d;
                    }
                }
            }

            .form-row {
                display: flex;
                flex-wrap: nowrap;
                margin-right: -5px;
                margin-left: -5px;

                .col-7 {
                    padding-right: 5px;
                    padding-left: 5px;
                    flex: 0 0 75%;
                    max-width: 75%;
                }

                .col-3 {
                    padding-right: 5px;
                    padding-left: 5px;
                    flex: 0 0 25%;
                    max-width: 25%;

                    .verify-btn {
                        height: 100%;
                        width: 100%;
                        color: #fff;
                        background-color: #0665d0;
                        border-color: #0665d0;
                        display: block;
                        padding: .375rem .75rem;
                        font-size: 1rem;
                        line-height: 1.5;
                        border-radius: .25rem;
                        text-align: center;

                        &:hover {
                            color: #fff;
                            background-color: #0553ab;
                            border-color: #054d9e;
                        }
                    }
                }

            }

            .register-btn {
                height: 100%;
                width: 100%;
                text-align: center;
                border-radius: .25rem;
                color: #fff;
                background-color: #0665d0;
                border-color: #0665d0;
                font-size: 1rem;
                line-height: 1.5;
                padding: .375rem .75rem;

                &:hover {
                    background-color: #0553ab;
                    border-color: #054d9e;
                }
            }
        }

        .more-container {
            background-color: #f8f9fa;
            text-align: left;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            padding: 1rem;

            .more-text {
                color: #6c757d;
                font-size: .875rem;

                &:hover {
                    color: #3d4246;
                }
            }
        }
    }

}
</style>
